<template>
	<view class="store">
		<!-- position: fixed; -->
		<view class="height_nav" style="width: 100%; position: fixed; top: 0; background-size: 100% auto; z-index: 999">
			<view class="" style="background: rgb(235, 190, 135)">
				<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
				<!-- width:'+navBarInfo.navBarWidth+'px; -->
				<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;'">
					<!-- 	<view class=" flex align-center" style="font-size: 30rpx;margin-left: 40rpx;">
						<image style="width: 34rpx;height: 34rpx;" src="../../static/Group 3819.png" mode=""></image>
						<text class="city">北京</text>
						<image style="width: 28rpx;height: 28rpx;" src="../../static/xiajiantou.png" mode=""></image>
					</view> -->
					<!-- <view class="flex flex-1 align-center" @click="onLocation" style="padding-left: 24rpx;">
						<view style="font-size: 0;">
							<image style="width: 42rpx;height: 42rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx;color: #333333;">
							{{positionText?positionText:address?address:'请选择'}}
						</view>
						<view style="font-size: 0;">
							<image style="width: 42rpx;height: 42rpx;"
								src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx;color: #fff;"
						:style="'width:'+navBarInfo.navBarContentWidth+'px;'">
						<view class="flex align-center" style="background: #fff;border-radius: 32rpx;">
							<view @click="changeRange(0)"
								style="padding: 12rpx 30rpx;border: 2rpx solid #fff;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==0?'color:#ffffff;background:#EBBF88;':''">
								同城
							</view>
							<view @click="changeRange(1)"
								style="padding: 12rpx 30rpx;border: 2rpx solid #fff;border-radius: 32rpx;font-size: 28rpx;color: #999;"
								:style="rangeIndex==1?'color:#ffffff;background:#EBBF88;':''">
								全国
							</view>
						</view>
					</view> -->
					<view @click="onLocation" class="flex flex-1 align-center" style="">
						<view style="font-size: 0; padding-left: 24rpx">
							<image style="width: 42rpx; height: 42rpx" src="https://sz.vvv5g.com/assets/img/wxImg/dingwei.png" mode=""></image>
						</view>
						<view class="text-overflow1" style="font-size: 30rpx; color: #333333">
							{{ positionText ? positionText : address ? address : '请选择' }}
						</view>
						<view style="font-size: 0">
							<image style="width: 22rpx; height: 22rpx" src="https://sz.vvv5g.com/assets/img/wxImg/downArrow.png" mode=""></image>
						</view>
					</view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff">
						<view class="flex align-center" style="background: #fff; border-radius: 32rpx">
							<view
								@click="changeRange(0)"
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 0 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								同城
							</view>
							<view
								@click="changeRange(1)"
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 1 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								全国
							</view>
						</view>
					</view>
					<view class="flex-1"></view>
				</view>
				<view class="search flex justify-center z-index:9999;">
					<view class="search_box">
						<image style="width: 40rpx; height: 40rpx" src="../../static/fangdajing.png" mode=""></image>
						<div class="line"></div>
						<input v-model="keywords" @input="searchAllList" placeholder="品牌" type="text" />
					</view>
				</view>
				<view class="flex flex-column align-center justify-around" style="padding-bottom: 28rpx; background: #f4f4f4; border-radius: 20rpx 20rpx 0 0"></view>
			</view>
		</view>
		<!-- 占位置 -->
		<view class="height_nav" style="width: 100%; background-size: 100% auto; z-index: 999; opacity: 0">
			<view class="" style="background: rgb(235, 190, 135)">
				<view class="" :style="'height:' + navBarInfo.statusBarHeight + 'px;'"></view>
				<view class="flex align-center justify-between" :style="'height:' + navBarInfo.navBarHeight + 'px;'">
					<view class="flex flex-1 align-center" style=""></view>
					<view class="text-overflow1 flex align-center justify-center" style="font-size: 32rpx; color: #fff">
						<view class="flex align-center" style="background: #fff; border-radius: 32rpx">
							<view
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 0 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								同城
							</view>
							<view
								style="padding: 12rpx 30rpx; border: 2rpx solid #fff; border-radius: 32rpx; font-size: 28rpx; color: #999"
								:style="rangeIndex == 1 ? 'color:#ffffff;background:#EBBF88;' : ''"
							>
								全国
							</view>
						</view>
					</view>
					<view class="flex-1"></view>
				</view>
				<view class="search flex justify-center z-index:9999;">
					<view class="search_box">
						<image style="width: 40rpx; height: 40rpx" src="../../static/fangdajing.png" mode=""></image>
						<div class="line"></div>
						<input placeholder="商品名/品牌/商品种类/关键字" type="text" />
					</view>
				</view>
				<view class="flex flex-column align-center justify-around" style="padding-bottom: 28rpx; background: #f4f4f4; border-radius: 20rpx 20rpx 0 0"></view>
			</view>
		</view>
		<view class="topFixed" style="border-radius: 20rpx 20rpx 0 0">
			<!-- {{item.image}} -->
			<!-- <view class="brandList">
				<div v-for="item in updateList" :key="item.id" @click="toShop(item)" class="item">
					<div class="head">
						
						<image style="width: 100%;height: 100%;" :src="img_url+item.image" mode="aspectFill"></image>
					</div>
					<div class="name">
						{{item.name}}
					</div>
				</div>
				<div v-if="updateList.length>14" @click="toMuch('updatetime')" class="item much_fixed">
					<div class="head flex justify-center align-center">
						<div class="much flex justify-evenly align-center ">
							<div class="left"></div>
							<div class="center"></div>
							<div class="left"></div>
						</div>
					</div>
					<div class="name">
						更多品牌
					</div>
				</div>
			</view> -->
			<view v-if="updateList.length != 0" class="brandList">
				<!-- <div v-for="item in updateList" :key="item.id" @click="toShop(item)" class="item">
					<div class="head">
						<image style="width: 100%;height: 100%;" :src="img_url+item.image" mode="aspectFill"></image>
					</div>
					<div class="name">
						{{item.name}}
					</div>
				</div> -->
				<view
					v-for="(item, index) in updateList"
					v-if="index <= 13"
					:style="(index + 1) % 5 == 0 ? '' : 'margin-right:12rpx;'"
					:key="item.id"
					@click="toShop(item)"
					class="flex flex-column align-center"
				>
					<view class="" style="font-size: 0">
						<image style="width: 126rpx; height: 126rpx; border-radius: 50%" :src="item.brands.image" mode=""></image>
					</view>
					<view class="text-overflow1" style="padding-bottom: 8rpx; width: 126rpx; font-size: 22rpx; color: #666; text-align: center; margin-top: 8rpx">
						{{ item.brands.name }}
					</view>
				</view>
				<view v-if="updateList.length > 14" @click="toMuch('updatetime')" class="flex flex-column align-center">
					<view class="flex align-center justify-center" style="width: 126rpx; height: 126rpx">
						<view class="flex align-center justify-center" style="width: 66rpx; height: 66rpx; background: #f8f8f8; border-radius: 50%">
							<view class="" style="width: 8rpx; height: 8rpx; background: #bdbdbd; border-radius: 50%"></view>
							<view class="" style="width: 10rpx; height: 10rpx; background: #4d4d4d; border-radius: 50%; margin-left: 8rpx; margin-right: 8rpx"></view>
							<view class="" style="width: 8rpx; height: 8rpx; background: #bdbdbd; border-radius: 50%"></view>
						</view>
					</view>
					<view class="text-overflow1" style="padding-bottom: 8rpx; width: 126rpx; font-size: 22rpx; color: #666; text-align: center; margin-top: 8rpx">更多品牌</view>
				</view>
				<!-- <div v-if="updateList.length>14" @click="toMuch('updatetime')" class="item much_fixed">
					<div class="head flex justify-center align-center">
						<div class="much flex justify-evenly align-center ">
							<div class="left"></div>
							<div class="center"></div>
							<div class="left"></div>
						</div>
					</div>
					<div class="name">
						更多品牌
					</div>
				</div> -->
			</view>
			<view class="" v-if="viewList.length">
				<swiper
					style="width: 702rpx; height: 214rpx; margin: 20rpx auto; background-color: #fff; border-radius: 24rpx"
					:indicator-active-color="'#FFFFFF'"
					:indicator-color="'rgba(255, 255, 255, 0.6)'"
					circular
					:indicator-dots="true"
					:autoplay="autoplay"
				>
					<swiper-item @click="toMuch('views')" style="width: 702rpx; height: 246rpx" v-for="(item, index) in viewList" :key="index">
						<image style="width: 702rpx; height: 214rpx; border-radius: 24rpx" :src="$wanlshop.oss(item.media, 414, 0, 1, 'transparent', 'png')" mode=""></image>
					</swiper-item>
				</swiper>
			</view>
			<view v-if="scoreList.length != 0" class="brandList1 flex flex-column">
				<div class="title flex justify-between align-center">
					<div style="position: relative; height: 30rpx">
						<div class="title_left" style="position: absolute; z-index: 20; width: 120rpx">评分最高</div>
						<image
							style="position: absolute; width: 36rpx; height: 20rpx; left: -10rpx; top: 8rpx"
							src="https://sz.vvv5g.com/assets/img/wxImg/be9d85ab7932cbba8824d865a579cda.png"
							mode=""
						></image>
					</div>

					<div @click="toMuch('score')" class="title_right flex align-center" style="height: 44rpx">
						<text>更多</text>
						<image style="width: 22rpx; height: 22rpx" src="https://sz.vvv5g.com/assets/img/wxImg/rightArrow.png" mode=""></image>
					</div>
				</div>
				<!-- <view class="flex flex-wrap item_box">
					<div v-for="item in scoreList" :key="item.id" @click="toShop(item)" class="item1">
						<div class="head1">
							<image :src="img_url+item.image" mode="aspectFill"></image>
						</div>
						<div class="name1">
							{{item.name}}
						</div>
					</div>
				</view> -->
				<!-- <view class="flex flex-wrap" style="padding: 0 10rpx;">
					<view v-for="(item,index) in scoreList" v-if="index<=7" :key="item.id" @click="toShop(item)"
						:style="((index+1)%4==0)?'':'margin-right:32rpx;'" class="flex flex-column"
						style="margin-bottom: 22rpx;">
						<view class="" style="font-size: 0;">
							<image style="width: 146rpx;height: 58rpx;border-radius: 29rpx;" :src="item.brands.image"
								mode=""></image>
						</view>
						<view class="text-overflow1"
							style="font-size: 22rpx;color: #666;margin-top: 14rpx;width: 146rpx;text-align: center;">
							{{item.brands.name}}
						</view>
					</view>
				</view> -->
				<view class="flex flex-wrap" style="padding-left: 10rpx">
					<view
						v-for="(item, index) in scoreList"
						v-if="index <= 13"
						:style="(index + 1) % 5 == 0 ? '' : 'margin-right:12rpx;'"
						:key="item.id"
						@click="toShop(item)"
						class="flex flex-column align-center"
					>
						<view class="" style="font-size: 0">
							<image style="width: 126rpx; height: 126rpx; border-radius: 50%" :src="item.brands.image" mode=""></image>
						</view>
						<view class="text-overflow1" style="padding-bottom: 8rpx; width: 126rpx; font-size: 22rpx; color: #666; text-align: center; margin-top: 8rpx">
							{{ item.brands.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="allbrand" style="padding-top: 40rpx">
			<div class="title flex justify-between align-center">
				<div class="title_left" style="background: url(../../static/Rectangle 1345.png)">全部品牌</div>
				<div @click="toMuch('')" class="title_right flex align-center" style="height: 44rpx">
					<text>更多</text>
					<image style="width: 22rpx; height: 22rpx" src="https://sz.vvv5g.com/assets/img/wxImg/rightArrow.png" mode=""></image>
				</div>
			</div>
		</view>
		<view class="fu_chuang" v-if="show" @click="close">
			<view class="c_fu_chuang mar-auto">
				<view class="c_fu_txt_box flex">
					<view class="list_txt" v-for="(item, index) in navsList" :key="index" @click="fuActive(item.id)">
						<view class="fu_txt s28">
							{{ item.name }}
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="" :class="tabisTrue ? 'xiding' : ''" :style="tabisTrue ? 'position:fixed;top:' + topheight + 'px;background-color: #f4f4f4;' : 'background-color: #f4f4f4;'">
			<view style="display: flex; padding-left: 32rpx; height: 52rpx">
				<scroll-view style="white-space: nowrap; font-size: 0; width: 750rpx; overflow: hidden" scroll-with-animation scroll-x="true" :scroll-into-view="'t' + tid">
					<view style="display: inline-block; margin-right: 52rpx" @click="onActive(item.id)" v-for="(item, index) in navsList" :key="index">
						<view :id="'t' + item.id" class="flex flex-column justify-center align-center">
							<view
								:class="navIndex == item.id ? 'flex align-center active_item' : 'flex align-center'"
								:style="navIndex == item.id ? 'font-weight:600;' : ''"
								style="font-size: 26rpx; color: #333"
							>
								{{ item.name }}
							</view>
						</view>
					</view>
				</scroll-view>
				<view class="fenleiimage" @click="onXianS" :style="tabisTrue ? 'position:fixed;right:0;' : ''">
					<image style="width: 34rpx; height: 34rpx" src="@/static/store/fenglei2.png" mode=""></image>
				</view>
			</view>
			<!-- 排序类型 -->
			<view class="screen_list_box flex justify-evenly" style="background: #f4f4f4">
				<view class="list_box flex align-center" v-for="(item, index) in screen_list" :key="index" @click="onActives(index)">
					<view :class="[listIndex == index ? 'active_txt' : 'active_txt1']" style="font-size: 24rpx">
						{{ item.txt }}
					</view>
					<view class="" style="font-size: 0">
						<image style="width: 32rpx; height: 32rpx" :src="listIndex == index ? item.img1 : item.img" mode=""></image>
					</view>
					<!-- <image class="img" :src="listIndex == index?item.img1:item.img" mode=""></image> -->
				</view>
			</view>
		</view>

		<view class="brand_box">
			<div v-for="item in allList" @click="toShop(item)" :key="item.id" class="brand_item">
				<!-- <image style="width: 126rpx;height:126rpx;margin-right:24rpx; border-radius: 8rpx;"
					:src="img_url+item.image" mode="aspectFill"></image> -->
				<image style="width: 126rpx; height: 126rpx; margin-right: 24rpx; border-radius: 8rpx" :src="item.brands.image" mode="aspectFill"></image>
				<div class="center">
					<!-- <div class="item_title">
						{{item.name}}
					</div> -->
					<div class="item_title">
						{{ item.brands.name }}
					</div>
					<div class="num">商家：{{ item.shop_num }}家 | 商品数：{{ item.goods_num }}件</div>
					<div class="num">好评率：{{ item.praise }}%</div>
				</div>
				<div class="num" style="position: absolute; bottom: 32rpx; right: 24rpx">浏览量：{{ item.views }}</div>
			</div>
			<view v-if="allList.length == 0" class="" style="font-size: 24rpx; color: #333; text-align: center; padding-top: 50rpx; background: #fff">暂无数据!</view>
		</view>
		<!-- <view class="" style="height: 2000rpx;background: red;">
			
		</view> -->
	</view>
</template>

<script>
import { mapState } from 'vuex';
import app from '../../App.vue';
export default {
	computed: {
		address2() {
			return this.$store.state.getLocation.address2;
		},
		// 选择的位置
		positionText() {
			return this.$store.state.getLocation.positionText;
		},
		selectedAddress() {
			return this.$store.state.getLocation.selectedAddress;
		},
		//选择位置经纬度
		lat() {
			return this.$store.state.getLocation.lat;
		},
		lng() {
			return this.$store.state.getLocation.lng;
		},
		rangeObj() {
			return this.$store.state.getLocation.rangeObj;
		}
		// ...mapState()
	},
	data() {
		return {
			// 搜索关键词
			searchValue: '',
			navIndex: 502,
			screenIndex: 0,
			tid: 1,
			keyWord: '',
			show: false,
			storeList: [],
			img_url: 'https://sz.vvv5g.com',
			autoplay: true,
			screen_list: [
				{
					img: '../../static/Group 121.png',
					img1: '../../static/Group 3817.png',
					txt: '最新'
				},
				{
					img1: '../../static/Group 3816.png',
					img: '../../static/Group 941.png',
					txt: '评分'
				},
				{
					img: '../../static/Group 122.png',
					img1: '../../static/Group 3814.png',
					txt: '销量'
				},
				{
					img: '../../static/Group 942.png',
					img1: '../../static/Group 3815.png',
					txt: '人气'
				}
			],
			listIndex: 0,
			tabisTrue: false, //是否吸顶
			navsList: [],
			address: '',
			longitude: '',
			latitude: '',
			statusbarHeight: 0,
			navBarInfo: {},
			topFixedHeight: 0,
			rangeIndex: 1, //0 同城 1 全国
			topheight: 0,
			viewList: [],
			updateList: [],
			scoreList: [],
			allList: [],
			page: 1,
			last_page: 0,
			flag: true,
			flag2: true,
			keywords: ''
		};
	},
	onLoad() {
		this.getNavsList();
		this.changeRange(this.rangeObj.goods);
		this.navBarInfo = this.$navBarInfo;
		let that = this;
		const sysres = uni.getSystemInfoSync();
		that.statusbarHeight = sysres.statusBarHeight;
		setTimeout(() => {
			const query = uni.createSelectorQuery().in(this);
			query
				.select('.height_nav')
				.boundingClientRect((data) => {
					this.topheight = data.height;
				})
				.exec();
		}, 300);
	},
	onShow() {
		this.address = '定位中';
		this.$getLocation().then((res) => {
			this.$request({
				url: 'common/getLocation',
				data: {
					lat: res.latitude,
					lng: res.longitude
				}
			}).then((jes) => {
				this.address = jes.data.data.address_component.city;
			});
		});
	},
	watch: {
		// 此处监听variable变量，当期有变化时执行
		rangeObj(newData, oldData) {
			// item1为新值，item2为旧值
			this.changeRange(newData.goods);
		}
	},
	mounted() {},
	// 监听页面滚动
	onPageScroll(e) {
		if (e.scrollTop > this.topFixedHeight) {
			this.tabisTrue = true;
		} else {
			this.tabisTrue = false;
		}
	},
	onPullDownRefresh() {
		this.getStoreData();
	},
	methods: {
		searchAllList() {
			this.page = 1;
			this.getAllList();
		},
		onActives(index) {
			if (this.listIndex == index) {
				this.flag2 = !this.flag2;
			}
			this.listIndex = index;
			this.page = 1;
			this.getAllList();
		},
		toShop: function (item) {
			uni.navigateTo({
				url: `/pages/index/brandShop?id=${item.id}&name=${item.name}`
			});
		},
		toMuch(sort) {
			if (sort) {
				uni.navigateTo({
					url: `/pages/index/more?sort=${sort}&cityName=${this.positionText ? this.positionText : this.address ? this.address : '请选择'}`
				});
			} else {
				uni.navigateTo({
					url: `/pages/index/more?cityName=${this.positionText ? this.positionText : this.address ? this.address : '请选择'}`
				});
			}
		},
		getScorelist() {
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			this.$request({
				url: 'brand_list/list',
				method: 'POST',
				data: {
					sort: 'score',
					order: this.flag ? 'desc' : 'asc',
					page: 1,
					limit: 15,
					keywords: '',
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0
				}
			}).then((res) => {
				if (res.statusCode == 200) {
					this.scoreList = res.data.data.list.data;
				}
			});
		},
		getAllList() {
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			this.$request({
				url: 'brand_list/list',
				method: 'POST',
				data: {
					order: this.flag2 ? 'asc' : 'desc',
					page: this.page,
					limit: 15,
					category_id: this.categoryid ? this.categoryid : '',
					keywords: this.keywords,
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0,
					sort: this.listIndex == 0 ? 'updatetime' : this.listIndex == 1 ? 'score' : this.listIndex == 2 ? 'sale' : 'views'
				}
			}).then((res) => {
				this.last_page = res.data.data.list.last_page;
				if (this.page == 1) {
					this.allList = res.data.data.list.data;
				} else {
					this.allList.push(...res.data.data.list.data);
				}
			});
		},
		onLocation() {
			uni.navigateTo({
				url: '/pages/filePages/onLocation/onLocation'
			});
		},

		getCitys(citys) {
			this.$store.commit('positionText', citys.name);
			this.$store.commit('lat', citys.lat);
			this.$store.commit('lng', citys.lng);
			let selectedAddress = citys.mergename ? citys.mergename[2] : citys.name;
			this.$store.commit('selectedAddress', selectedAddress);
			this.$rangeObj(selectedAddress);
		},
		onActive(id) {
			if (id != 502) {
				this.navIndex = id;
				this.categoryid = id;
				this.page = 1;
				this.getAllList();
			} else {
				this.navIndex = 502;
				this.categoryid = '';
				this.page = 1;
				this.getAllList();
			}
		},
		// navlist切换门店
		fuActive(id) {
			if (id != 502) {
				this.navIndex = id;
				this.categoryid = id;
				this.page = 1;
				this.getAllList();
			} else {
				this.navIndex = 502;
				this.categoryid = '';
				this.page = 1;
				this.getAllList();
			}
			this.show = !this.show;
		},
		onXianS() {
			this.show = !this.show;
		},
		close() {
			this.show = false;
		},
		changeRange(e) {
			this.rangeIndex = e;
			this.page = 1;
			this.getAllList();
			this.getSkyList();
		},
		async getSkyList() {
			uni.showLoading({
				mask: true
			});
			let list1 = await this.getViewslist();
			this.viewList = list1.data.data.page;
			let list2 = await this.getScorelist();
			this.scoreList = list2.data.data.list.data;
			let list3 = await this.getUpdatetimelist();
			this.updateList = list3.data.data.list.data;
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query
					.select('.topFixed')
					.boundingClientRect((data) => {
						this.topFixedHeight = data.height;
					})
					.exec();
			}, 300);
			uni.hideLoading();
		},
		getViewslist() {
			return this.$request({
				url: 'common/adverts'
			});
		},
		getUpdatetimelist() {
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			return this.$request({
				url: 'brand_list/list',
				method: 'POST',
				data: {
					sort: 'updatetime',
					order: 'desc',
					page: 1,
					limit: 15,
					keywords: '',
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0
				}
			});
		},
		getScorelist() {
			let latitude = uni.getStorageSync('location').latitude;
			let longitude = uni.getStorageSync('location').longitude;
			return this.$request({
				url: 'brand_list/list',
				method: 'POST',
				data: {
					sort: 'score',
					order: 'desc',
					page: 1,
					limit: 15,
					keywords: '',
					new_area: this.rangeIndex == 1 ? '' : this.selectedAddress ? this.selectedAddress : this.address2 ? this.address2 : '',
					lng: this.lng ? this.lng : longitude ? longitude : 0,
					lat: this.lat ? this.lat : latitude ? latitude : 0
				}
			});
		},
		// 调取导航
		getOpenLoaction(latitude, longitude) {
			if (!latitude && !longitude) {
				uni.showToast({
					title: '当前店铺未开启定位！',
					icon: 'none'
				});
				return false;
			}
			uni.openLocation({
				latitude: Number(latitude),
				longitude: Number(longitude),
				success: function () {},
				fail(error) {}
			});
		},
		// 获取类目列表
		getNavsList() {
			let that = this;
			that
				.$request({
					url: 'common/categoryList'
				})
				.then((res) => {
					if (res.statusCode == 200) {
						res.data.data.unshift({
							name: '全部门店',
							id: 502
						});
						that.navsList = res.data.data;
					}
				});
		},
		// 搜索门店
		onSearch() {},
		onInput() {},
		// 获取门店列表
		getStoreData() {
			let that = this;
			let index = that.screenIndex;
			uni.showLoading({
				title: '加载中'
			});
			that.storeList = [];

			that
				.$request({
					url: 'shop/lists',
					data: {
						cat_id: that.navIndex == 502 ? '' : that.navIndex,
						lng: uni.getStorageSync('location').longitude,
						lat: uni.getStorageSync('location').latitude,
						search: that.keyWord,
						sort: index == 0 ? 'sale' : index == 1 ? 'like' : 'distance'
					}
				})
				.then((res) => {
					uni.hideLoading();
					let array = [];
					let array1 = [];
					that.totalNum = res.data.current_page;
					that.items = res.data.data.data.map((item, index) => {
						if (item.follow == 1) {
							array.push(item);
						} else {
							array1.push(item);
						}
					});
					that.storeList = [...array, ...that.storeList, ...array1];
					uni.stopPullDownRefresh();
				});
		}
	}
};
</script>

<style scoped lang="scss">
.screen_list_box {
	padding-bottom: 10upx;
	background-color: #ffffff;
	box-sizing: border-box;
	.list_box {
		.active_txt {
			color: #333333;
		}

		.active_txt1 {
			color: #999999;
		}
	}

	.list_box:nth-child(1) {
		margin-left: 0;
	}
}
.store {
	background-color: #f4f4f4;
	overflow: hidden;

	.fenleiimage {
		width: 96rpx;
		height: 38rpx;
		background: linear-gradient(90deg, rgba(244, 244, 244, 0) 0%, #f4f4f4 18.75%);
		display: flex;
		justify-content: center;
	}

	.fu_chuang {
		width: 750upx;
		height: 100vh;
		background: rgba(0, 0, 0, 0.5);
		position: fixed;
		top: 0;
		z-index: 99999;

		.c_fu_chuang {
			width: 686upx;
			background: #ffffff;
			border-radius: 24upx 24upx 24upx 24upx;
			margin-top: 382upx;

			.c_fu_txt_box {
				flex-wrap: wrap;
				padding-top: 34upx;
				padding-bottom: 8upx;

				.list_txt {
					margin-left: 46upx;
					margin-bottom: 30upx;

					.fu_txt {
						color: #333;
					}
				}
			}
		}
	}

	.city {
		font-family: 'PingFang SC';
		font-style: normal;
		font-weight: 400;
		font-size: 30rpx;
		color: #333333;
	}

	.search {
		width: 750rpx;
		height: 64rpx;
		margin-bottom: 24rpx;

		.search_box {
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			width: 642rpx;
			height: 64rpx;
			background: rgba(255, 255, 255, 0.67);
			border-radius: 16px;

			input {
				width: 100%;
				height: 100%;
				font-size: 26rpx;
			}

			.line {
				width: 2rpx;
				height: 20rpx;
				background-color: #e2c194;
				margin: 0 20rpx;
			}
		}
	}

	.banner {
		width: 702rpx;
		margin: 0 auto;
		margin-bottom: 40rpx;
		height: 204rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		line-height: 204rpx;
	}

	.allbrand {
		margin: 0 auto;
		margin-bottom: 40rpx;
		width: 688rpx;
		border-radius: 20rpx;

		.title {
			margin-bottom: 32rpx;
		}

		.title_left {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		.title_right {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}

		.title {
			margin-bottom: 32rpx;
		}

		.title_left {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		.title_right {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}
	}

	.brandList {
		margin: 0 auto;
		width: 702rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-wrap: wrap;
		padding: 32rpx 12rpx 32rpx 12rpx;
		padding-right: 0;
		position: relative;
		.title {
			margin-bottom: 32rpx;
		}

		.title_left {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		.title_right {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}

		.much_fixed {
			position: absolute;
			bottom: 32rpx;
			right: 10rpx;
		}

		.item {
			width: 20%;
			height: 164rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			.head {
				width: 126rpx;
				height: 126rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				margin-bottom: 8rpx;

				image {
					width: 66rpx;
					height: 66rpx;
					border-radius: 50%;
				}

				.much {
					width: 66rpx;
					height: 66rpx;
					background: #f8f8f8;
					border-radius: 50%;

					.left {
						width: 8rpx;
						height: 6rpx;
						border-radius: 3rpx;
						background: #bdbdbd;
					}

					.center {
						width: 10rpx;
						height: 10rpx;
						background: #4d4d4d;
						border-radius: 50%;
					}
				}
			}

			.name {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}
		}
	}

	.brandList1 {
		margin: 0 auto;
		width: 702rpx;
		border-radius: 20rpx;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 32rpx 0rpx 32rpx 0rpx;
		.title {
			margin-bottom: 32rpx;
			width: 650rpx;
			height: 50rpx;
		}

		.title_left {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 600;
			font-size: 30rpx;
			color: #333333;
		}

		.title_right {
			font-family: 'PingFang SC';
			font-style: normal;
			font-weight: 400;
			font-size: 22rpx;
			color: #666666;
		}

		.item_box {
			width: 100%;
		}

		.item1 {
			width: 25%;
			height: 110rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: center;
			margin-right: 12rpx;
			margin-left: 16rpx;

			.head1 {
				width: 144rpx;
				height: 60rpx;
				background-color: #ccc;
				border-radius: 164rpx;
				overflow: hidden;

				image {
					width: 144rpx;
					height: 60rpx;
				}
			}

			.name1 {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				color: #666666;
			}
		}
	}

	.xiding {
		z-index: 9999;
		overflow: hidden;
	}

	.brand_box {
		.brand_item {
			height: 190rpx;
			width: 702rpx;
			padding: 0 24rpx;
			background: #ffffff;
			border-bottom: 16rpx solid #f4f4f4;
			position: relative;
			display: flex;
			align-items: center;
			.center {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				height: 126rpx;

				.item_title {
					font-family: 'PingFang SC';
					font-style: normal;
					font-weight: 500;
					font-size: 28rpx;
					color: #333333;
				}
			}

			.num {
				font-family: 'PingFang SC';
				font-style: normal;
				font-weight: 400;
				font-size: 22rpx;
				color: #999999;
			}
		}
	}

	.active_item {
		background: url('@/static/store/fenglei3.png') right bottom no-repeat;
		background-size: 70%;
	}
}
</style>
